<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<style>
    .mui-content {
        background: #efeff4;
    }
    .message_top {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        overflow: hidden;
        background: #FFFFFF;
        width: 100%;
    }
    .mui-control-content {
        height: 100%;
        position: initial;
    }
    div.top-nav-comment {
        width: 100%;
        text-align: center;
    }
    div.top-nav-comment a {
        display: inline-block;
        font-size: 16px;
        color: #333;
        padding: 8px 12px;
        margin: 0 15px 10px 0;
        border-bottom: 2px solid #FFF;
    }
    div.top-nav-comment a.nav-active {
        color: #29bc4f;
        border-bottom: 2px solid #29bc4f;
    }
    .mui-navigate-right .view_span {
        display: block;
        font-size: 0.8rem;
        color: #979797;
    }
    .mui-navigate-right .title {
        display: block;
        font-size: 1.2rem;
        color: #000;
    }
    .mui-table-view{
        margin-top: 10px;
        background: #efeff4;
    }
    .mui-table-view:before {
        display: none;
    }
    .mui-table-view:after {
        display: none;
    }
    .mui-content:after{ display: block; content: ''; clear: both; }
    div.top-nav-comment#topNavComment a{ margin-bottom: 0; padding: 20px 10px 10px 10px; }
    ul.mui-table-view{ padding-top: 45px; }
    div.goodsBox{
        margin-bottom: 10px;
        background-color: #fff;
        padding: 1rem 1rem 0 1rem;
    }
    div.goodsBox p{
        padding: 0 0 10px 0;
    }
    div.goodsBox:after{ display: block; content: ''; clear: both; }

    li.order_li:first-child{
        margin-top: 8px;
    }
    .mui_comm_ul .mui_comm_li{
        font-size: 1.2rem;
    }
    .mui_comm_ul .mui_comm_li.left{
        border-right: 1px solid #e8e8e8;
    }
    .mui_comm_ul .mui_comm_li.right{
        color: #29bc4f;
    }
</style>
<div class="mui-content">
    <div class="message_top">
        <div class="top-nav-comment" id="topNavComment">
            <a class="nav-active" data-target="#item1">已完成</a>
            <a data-target="#item2">未完成</a>
        </div>
    </div>
    <div>
        <div id="item1" class="mui-control-content mui-active">
            <div class="content-list-wrap">
                <div class="mui-content mui-scroll-wrapper" id="commentListWrap">
                    <div class="mui-scroll">
                        <ul class="mui-table-view" id="payed">
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div id="item2" class="mui-control-content">
            <div class="content-list-wrap">
                <div class="mui-content mui-scroll-wrapper" id="noticeListWrap">
                    <div class="mui-scroll">
                        <ul class="mui-table-view" id="unpay">
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 评论 -->
<script type="text/html" id="tpl-order">
    {{each list as value i}}
    <li class="order_li">
        <div class="goodsBox">
            <p>商品名称：<span style="color: #000">{{value.busi_name}}</span></p>
            <p>下单日期：<span style="color: #000">{{dataFormat(value.create_time,'yyyy年MM月dd日')}}</span></p>
            <p>订单费用：<span style="color: #000">{{dealAmount(value.price)}}元</span></p>
            <p>订单状态：<span style="color: #000">{{orderStatusText value.status}}</span></p>
            {{if value.status == 1}}
            <ul class="mui_comm_ul">
                <li class="mui_comm_li left" data-id="{{value.id}}" id="delOrder">
                    <span>取消</span>
                </li>
                <li class="mui_comm_li right" data-id="{{value.id}}" id="pay" >
                    <span>立即支付</span>
                </li>
            </ul>
            {{/if}}
        </div>
    </li>
    {{/each}}
</script>

<script>
    var _messageIndex = 1,message_page = 0,_noticeIndex = 1,notice_page = 0;

    function payedPullUp2Refresh() {
        var _this = this;
        if (_messageIndex < message_page) {
            $.ajax({
                url: _basePath + "/app/member/listMineOrder",
                data: {
                    curPage: _messageIndex + 1,
                },
                dataType: 'json',
                success: function (data) {
                    message_page = data.resultList.totalPage;
                    var _html = template('tpl-order', data.resultList);
                    $("#payed").append(_html);

                    _messageIndex++;

                    //如果存在数据，则继续添加数据
                    if (_messageIndex < message_page) {
                        _this.endPullupToRefresh(false);
                    } else {
                        _this.endPullupToRefresh(true);
                    }
                }
            });

        } else {
            _this.endPullupToRefresh(true);
        }
    }

    function unpayPullUp2Refresh() {
        var _this = this;
        if (_noticeIndex < notice_page) {
            $.ajax({
                url: _basePath + "/app/member/listMineUnPayOrder",
                data: {
                    curPage: _noticeIndex + 1,
                },
                dataType: 'json',
                success: function (data) {
                    notice_page = data.resultList.totalPage;
                    var _html = template('tpl-order', data.resultList);
                    $("#unpay").append(_html);

                    _noticeIndex++;

                    //如果存在数据，则继续添加数据
                    if (_noticeIndex < notice_page) {
                        _this.endPullupToRefresh(false);
                    } else {
                        _this.endPullupToRefresh(true);
                    }
                }
            });

        } else {
            _this.endPullupToRefresh(true);
        }
    }


    $(function () {

        mui('#topNavComment').on('tap', 'a', function () {
            $('.mui-control-content').hide();
            $($(this).data('target')).show();

            $('#topNavComment a').removeClass('nav-active');
            $(this).addClass('nav-active');
        });

        loadPayed();
        loadUnpay();

        //删除订单
        mui('body').on("tap", "#delOrder",function () {
            var _id = $(this).data("id");
            $.ajax({
                url: _basePath + "app/member/orderCancel",
                dataType: 'json',
                data: {
                    id:_id
                },
                success: function (data) {
                    if(typeof data.resCode != undefined && data.resCode == 0) {
                        mui.toast("订单取消成功");
                        $("#payed").html("");
                        $("#unpay").html("");
                        loadPayed();
                        loadUnpay();
                    }else{
                        mui.toast(data['message']);
                    }
                }
            });
        });
        //通知详情
        mui('body').on("tap", "#pay", function () {
            var _id = $(this).data("id");
            mui.openWindow({
                url : _basePath + "app/page/mine_pay?id=" + _id
            })
        });
    });

    function loadPayed() {
        $.ajax({
            url: _basePath + "app/member/listMineOrder",
            dataType: 'json',
            success: function (data) {
                if(typeof data.resultList != undefined && data.resCode == 0) {
                    var _html = template('tpl-order', data.resultList);
                    $("#payed").append(_html);
                    message_page = data.resultList.totalPage;
                    initPayedPullUp();
                }
            }
        });
    }

    function loadUnpay() {
        $.ajax({
            url: _basePath + "/app/member/listMineUnPayOrder",
            dataType: 'json',
            success: function (data) {
                if(typeof data.resultList != undefined && data.resCode == 0) {
                    var _html = template('tpl-order', data.resultList);
                    $("#unpay").append(_html);
                    notice_page = data.resultList.totalPage;
                    initUnpayPullUp();
                }
            }
        });
    }

    function initPayedPullUp() {
        //初始化上拉加载
        mui('#commentListWrap').pullRefresh({
            up: {
                auto:false,
                contentrefresh: "正在加载...",
                contentnomore: "没有更多数据了",
                callback: payedPullUp2Refresh
            }
        });
    }

    function initUnpayPullUp() {
        //初始化上拉加载
        mui('#noticeListWrap').pullRefresh({
            up: {
                auto:false,
                contentrefresh: "正在加载...",
                contentnomore: "没有更多数据了",
                callback: unpayPullUp2Refresh
            }
        });
    }

</script>

